import "./App.css";
import React from "react";
// with开头的基本都是hoc高阶组件
// 接受一个参数是组件，返回一个新的组件
// selectData是一个回调函数
function withSubscription(WrappedComponent, selectData) {
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(DataSource, props),
      };
    }
    componentDidMount() {
      // 订阅更改
      DataSource.addChangeListener(this.handleChange);
    }

    componentWillUnmount() {
      // 清除订阅
      DataSource.removeChangeListener(this.handleChange);
    }
    handleChange() {
      // 当数据源更新时，更新组件状态
      this.setState({
        data: selectData(DataSource, props),
      });
    }
    render() {
      // 每一个组件接受的数据都不同
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  }
  return App;
}
// hoc定义好之后开始 开始完成业务组件
// CommentList主要做ui渲染
const CommentListWithSub = withSubscription(CommentList, (DataSource, props) =>
  DataSource.getComments()
);
const BlogPostWithSub = withSubscription(BlogPost, (DataSource, props) =>
  DataSource.getComments(props.id)
);
export default withSubscription;
